<template>
  <el-select
    :multiple="multiple"
    :collapse-tags="collapseTags"
    :clearable="clearable"
    :size="size"
    :placeholder="placeholder"
    :loading="loading"
    :filterable="filterable"
    :disabled="disabled"
    class="dg-select"
    v-model="checkedVal">
    <el-option
      v-for="item in optionsData"
      :key="item.id"
      :label="item.dictLabel"
      :value="item.dictValue" />
  </el-select>
</template>

<script>
import * as API_Dict from './api';

export default {
  name: 'DgDictSelect',
  model: {
    event: 'change'
  },
  // {placeholder; multiple: 多选; filterable: 筛选; clearable: 清空; size: 尺寸; disabled: 禁用; dictType: 字典类型; defaultData: 默认值}
  props: ['value', 'placeholder', 'multiple', 'filterable', 'collapseTags', 'clearable', 'size', 'disabled', 'dictType'],
  data () {
    return {
      checkedVal: typeof(this.value) !== 'object' && (this.value || this.value === 0) ? this.value.toString() : this.value,
      loading: false,
      optionsData: []
    };
  },
  watch: {
    // dictType () {
    //   this.remoteMethod();
    // },
    value (newVal) {
      let _val = newVal;
      if (typeof (newVal) !== 'object' && (newVal || newVal === 0)) {
        _val = newVal.toString();
      };
      this.checkedVal = _val;
    },
    checkedVal (newVal) {
      let _val = newVal;
      if (this.multiple === undefined || typeof (_val) !== 'object') {
        if (_val || _val === 0) {
          _val = newVal.toString();
        };
      };
      this.$emit('change', _val);
    }
  },
  mounted () {
    this.remoteMethod();
  },
  methods: {
    /**
      * @date 2021/05/10
      * @author wolfMan
      * @description {获取数据源}
    */
    remoteMethod () {
      API_Dict.getDictsByType(this.dictType).then(response => {
        this.optionsData = response.data;
      });
    }
  }
};
</script>

<style type="text/scss" lang="scss">
.dg-select {
  width: 100%;
}
</style>